<template>
  <basic-container >
    <avue-form
        ref="excelForm"
        v-model="excelForm"
        :option="excelOption"
      >
      <template slot="menuForm">
        <el-row>
          <el-col :span="12">
            <el-alert
              title="开始日期与结束日期最大间隔 31 天；仅能下载近 90天 的对账单"
              type="warning"
              :closable="false"
              style="margin-bottom: 10px"
            >
            </el-alert>
          </el-col>
        </el-row>
        
        <el-button  icon="el-icon-download" type="primary" style="margin-left:350px;" @click="handleSubmit" v-if="permissionList.exportBtn">立即下载</el-button>
      </template>
      </avue-form>
  </basic-container>
</template>

<script>
import { getExport } from "@/api/rb-core/dealManagement/dealManagement";
import { downloadFileExcel } from "@/util/util";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";

export default {
  data() {
     var validateTimeData = (rule, value, callback)=>{
      if(value.length){
        if(((new Date(value[1]).getTime() - new Date(value[0]).getTime()) / (3600 * 1000 * 24)) > 31){
          this.excelForm.timeData=[];
          this.excelForm.beginTime = "";
          this.excelForm.endTime = "";
          callback(new Error('开始日期与结束日期最大间隔 31 天!'));
        }else {
          callback();
        }
      }else{
        callback(new Error('请选择对账时间段，开始日期与结束日期最大间隔 31 天!'));
      }
    };
    return {
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 160, //弹出表单的标题的统一宽度
        menuPosition: 'left',
        column: [
          {
            label: '租户',
            prop: 'tenantId',
            type: 'select',
            // cascader: ['rpiNo'],
            // dataType: "string",
            props: {
              label: 'tenantName',
              value: 'tenantId'
            },
            filterable:true,
            dicUrl: `api/blade-system/tenant/list?current=-1&size=-1`,
            dicFormatter:(data)=>{
              return data.data.records
            },
            rules: [
              {
                // required: true,
                message: '请选择客户经理',
                trigger: 'change'
              }
            ],
            // span: 10,
            row:true,
            overHidden: true
          },
          {
            label: '商户',
            prop: 'rpiNo',
            type: 'select',
            cascader:['rpsNo'],
            // dataType: "number",
            props: {
              label: 'rpiName',
              value: 'rpiNo'
            },
            filterable:true,
            dicUrl: `/api/rb-core/core/trade/pos_trade/posInfoList`,
            dicFormatter:(data)=>{
              return data.data
            },
            rules: [
              {
                // required: true,
                message: '请选择商户',
                trigger: 'change'
              }
            ],
            // span: 10,
            row:true,
            overHidden: true
          },
          {
            label: '门店',
            prop: 'rpsNo',
            type: 'select',
            // dataType: "number",
            props: {
              label: 'rpsName',
              value: 'rpsNo'
            },
            filterable:true,
            dicUrl: `/api/rb-core/core/trade/pos_trade/posStoreList?rpiNo={{rpiNo}}`,
            dicFormatter:(data)=>{
              return data.data
            },
            rules: [
              {
                // required: true,
                message: '请选择门店',
                trigger: 'blur'
              }
            ],
            // span: 10,
            row:true,
            overHidden: true
          },
          {
            label: '交易状态',
            prop: 'rptPayState',
            type: 'radio',
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dicUrl: `/api/blade-system/dict/dictionary?code=bill_statue`,
            dicFormatter:(data)=>{
              data.data.unshift({dictValue: "全部",dictKey: ""});
              return data.data
            },
            span: 24,
            row:true,
            overHidden: true
          },
          {
            label: "支付方式",
            prop: "rptPayType",
            type: 'radio',
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            // dataType: "number",
            dicUrl: "/api/blade-system/dict/dictionary?code=rpt_pay_type",
            dicFormatter:(data)=>{
              data.data.unshift({dictValue: "全部",dictKey: ""});
              return data.data
            },
            span: 24,
            row:true,
            overHidden: true
          },
          {
            label: "对账单时间段",
            prop: "timeData",
            type: "datetimerange",
            searchRange: true,
            defaultTime:['00:00:00', '23:59:59'],
            format:'yyyy-MM-dd HH:mm:ss',
            valueFormat:'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: "对账单开始时间",
            endPlaceholder: "对账单结束时间",
            search: true,
            rules: [
              {
                required: true,
                validator: validateTimeData,
                trigger: "change",
              },
            ],
            // span: 10,
            row:true,
            pickerOptions: {
              disabledDate(time) {
                let currentTime = new Date(dateFormat(new Date(),'yyyy-MM-dd')).getTime();
                let t = new Date(dateFormat(time,'yyyy-MM-dd')).getTime();
                let pastTime = new Date(dateFormat(new Date(Date.now() - 3600 * 1000 * 24 * 90),'yyyy-MM-dd')).getTime();
                
                if(currentTime < t){
                  return true
                }else if(pastTime >= t){
                  return true
                }else{
                  return false
                }
              }
            },
            overHidden: true
          }
        ],
      }
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        exportBtn: this.vaildData(this.permission.bill_export, false)
      };
    },
  },
  watch: {
    "excelForm.timeData"(val){
      if(val.length){
        this.excelForm.beginTime = val[0];
        this.excelForm.endTime = val[1];
      }else{
        this.excelForm.beginTime = "";
        this.excelForm.endTime = "";
      }
    }
  },
  methods: {
    handleSubmit(){
      let _this = this;
      _this.$refs.excelForm.validate((vaild,done)=>{
          if(vaild){
            _this.$confirm("是否下载对账单数据?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            getExport(_this.excelForm).then((res) => {
                downloadFileExcel(res);
                done()
              },
              (error) => {
                window.console.log(error);
                done()
              }
            );
          });
          }
        })
    }
  }
};
</script>


<style lang="scss" scoped>
.avue-form{
  padding-left: 200px;
}
/deep/ .el-alert{
  padding:0 10px;
}
</style>

